<template>
  <div ref="appWindow" class="resizeView appwindow appwindow-active">
    <!-- 窗口按钮 -->
    <ul class="appwindow-bar" @mousedown.stop="">
      <li @click.stop="null"><i class="icon iconfont iconguanbi"></i></li>
    </ul>
    <!-- 主体内容 -->
    <section class="appwindow-body" style="background: #F0F0F0;">
      <header class="resize-header h7">
        调整大小和扭曲
      </header>
      <section class="resize-body">
        <!-- 尺寸 -->
        <div class="resize-group--top">
          <div class="flex-row-between resize-form-item">
            <div class="resize-img">
              <div class="arrow"></div>
              <div class="react"></div>
            </div>
            <div>水平(H):</div>
            <input type="text" v-model="width">
          </div>
          <div class="flex-row-between resize-form-item">
            <div class="resize-img rotateZ90">
              <div class="arrow"></div>
              <div class="react"></div>
            </div>
            <div>垂直(H):</div>
            <input type="text" v-model="height">
          </div>
        </div>
        <!-- 倾斜 -->
        <div class="resize-group--bottom">
          <div class="flex-row-between resize-form-item">
            <div class="resize-img">
              <div class="arrow"></div>
              <div class="react react--lean"></div>
            </div>
            <div>水平(H):</div>
            <input type="text">
          </div>
          <div class="flex-row-between resize-form-item">
            <div class="resize-img rotateZ90">
              <div class="arrow"></div>
              <div class="react react--lean"></div>
            </div>
            <div>垂直(H):</div>
            <input type="text">
          </div>
        </div>
        <!-- 按钮 -->
        <div class="form-btn-grouop">
          <div @click="subForm" class="form-btn g-btn">确定</div>
          <div @click="close" class="g-btn form-btn">取消</div>
        </div>
      </section>
    </section>
  </div>
</template>

<script>
  export default {
    name: "ResizeForm",
    components: {},
    props: [],
    data() {
      return {
        width: 0,
        height: 0,
        skewX: 0,
        skewY: 0,
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      subForm() {
        this.$emit('subForm', {
          width: this.width,
          height: this.height,
          skewX: this.skewX,
          skewY: this.skewY,
        });
      },
      close() {
        this.width = this.height = this.skewX = this.skewY = 0;
        this.$emit('close');
      }
    },
    computed: {}
  }
</script>
<style scoped>
  /* 调整大小 */
  .resizeView {
    width: 279px;
    height: 424px;
  }

  .resize-header {
    height: 25px;
    line-height: 25px;
    padding: 0 5px;
    background: #fff;
  }

  .resize-body {
    width: 100%;
    height: calc(100% - 25px);
    padding: 10px
  }

  .resize-group--top, .resize-group--bottom {
    position: relative;
    width: 100%;
    height: 150px;
    padding: 0 15px;
    margin: 10px 0 30px 0;
    border: #ccc solid 1px;
  }

  .resize-group--bottom {
    margin-bottom: 15px;
  }

  .resize-group--top:before, .resize-group--bottom:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    transform: translate(5px, -50%);
    padding: 0 2px;
    background: #F0F0F0;
  }

  .resize-group--top:before {
    content: '重新调整大小（像素）';
  }

  .resize-group--bottom:before {
    content: '倾斜（角度）';
  }

  .resize-img {
    position: relative;
    width: 30px;
    height: 30px;
    padding-top: 2px;

    & .arrow {
      position: relative;
      margin: 0 auto;
      width: 13px;
      height: 1px;
      background: red;
    }

    & .arrow:before, & .arrow:after {
      content: '';
      display: inline-block;
      position: absolute;
      width: 0;
      height: 0;
      border: transparent solid 4px;
    }

    & .arrow:before {
      transform: translate(-100%, -50%);
      border-right: red solid 4px;
    }

    & .arrow:after {
      transform: translate(140%, -50%);
      border-left: red solid 4px;
    }

    & .react {
      margin-top: 5px;
      width: 100%;
      height: 18px;
      background: #fff;
      border: #cbcbcb solid 1px;
      box-shadow: 1px 1px 3px black;
    }

    & .react--lean {
      transform: skewX(-25deg);
    }
  }

  .resize-form-item {
    align-items: center;
    margin-top: 20px;

    & input {
      padding-left: 5px;
      width: 60px;
      height: 25px;
    }

    & input:focus {
      outline: none;
      border: 1px solid #66AEE6;
    }
  }

  .form-btn-grouop {
    display: flex;
    justify-content: flex-end;

    & .form-btn {
      margin-right: 10px;
      padding: 2px 20px;
      border: 1px solid #D0D0D0;
    }
  }
</style>
